<template>
  <v-chart class="chart" :option="option"></v-chart>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
//pinia
import { storeToRefs } from 'pinia'
import { useOlStore } from '@/stores/openlayer.js'

//从pinia导入需要的变量
const store = useOlStore()

const { searchPoint } = storeToRefs(store)

// console.log(searchPoint.value.features)

const data = computed(() => {
  const features = searchPoint.value.features
  let arr = []
  features.forEach((item) => {
    //获取到所有的label的值
    arr.push(item.properties.label)
  })
  //   统计所有的label的值
  return Array.from(
    arr.reduce((map, item) => {
      map.set(item, (map.get(item) || 0) + 1)
      return map
    }, new Map())
  ).map(([label, count]) => ({ label, count }))
})
//获取到了所有的label的值,还要进行统计处理
// console.log(allLabels.value)

// console.log(data)

const option = ref({
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: '5%',
    left: 'center',
  },
  series: [
    {
      //   name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
      },
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: data.value.map((item) => ({ value: item.count, name: item.label })),
    },
  ],
})
</script>

<style scoped>
.chart {
  width: 600px;
  height: 400px;
  margin: 0 auto;
}
</style>
